<template>
  <a-table bordered :data-source="formState" :columns="columns">
    <template #name="{ record }">
      <div class="editable-cell">
        <div class="editable-cell-input-wrapper">
          <a-input v-model:value="record.name" />
        </div>
      </div>
    </template>
	<template #description="{ record }">
	  <div class="editable-cell">
	    <div class="editable-cell-input-wrapper">
	      <a-input v-model:value="record.description" />
	    </div>
	  </div>
	</template>
  </a-table>
  
  <a-button type="primary" @click="showModal">批量编辑</a-button>
  <a-modal v-model:open="open" title="批量编辑" @ok="handleOk" ok-text="确认" cancel-text="取消">
    <a-textarea v-model:value="value" placeholder="请输入多行文本"  @input="handleTextareaInput">

    </a-textarea>
  </a-modal>

</template>

<script setup>
import { h, reactive, ref } from 'vue';

const formState = reactive([
  { name: '11111', description: '22222' }
]);

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
	key:"0",
	slots: {
	  customRender: 'name',
	},
  },
  {
    title: '描述',
    dataIndex: 'description',
	key:"1",
	slots: {
	  customRender: 'description',
	},
  },
];



const open = ref(false);

const showModal = () => {
  open.value = true;
};

const handleOk = (e) => {
  console.log(e);
  open.value = false;
};

const value = ref('');

const handleTextareaInput = (event) => {
  const inputValue = event.target.value;
  const rows = inputValue.split('\n'); // 过滤只包含空白符的行

  // 动态调整表格行数
  while (formState.length < rows.length) {
    formState.push({ name: '', description: '' });

  }
  while (formState.length > rows.length) {
    formState.pop();
  }


  // 填充数据到表格对应的位置
  formState.forEach((item, index) => {

    item.name = ""
    if (index < rows.length) {
      item.name = rows[index];
      formState[index].name = item.name;

    } else {
      item.name = ''; // 清空多余的行
    }

  });

};
</script>

<style lang="less">
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>